import {observer} from 'mobx-react-lite';
import {Path, Rect, G, Defs, ClipPath} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';
import {IconProps} from './types';

export const SvgDay = observer((props: IconProps) => {
  const {colorKey = 'color_1'} = props;
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      <G clipPath="url(#clip0_621_22948)">
        <Path
          translateX={1.5}
          translateY={1.5}
          d="M5.64648 1.33334C5.55894 1.33334 5.47225 1.35058 5.39136 1.38408C5.31048 1.41759 5.23699 1.46669 5.17508 1.5286C5.11317 1.5905 5.06407 1.664 5.03056 1.74488C4.99706 1.82576 4.97982 1.91245 4.97982 2V3.33334H3.64648C3.11605 3.33334 2.60734 3.54405 2.23227 3.91912C1.8572 4.2942 1.64648 4.8029 1.64648 5.33334V15.3333C1.64648 16.2174 1.99767 17.0652 2.6228 17.6904C3.24792 18.3155 4.09576 18.6667 4.97982 18.6667H15.6465C16.5305 18.6667 17.3784 18.3155 18.0035 17.6904C18.6286 17.0652 18.9798 16.2174 18.9798 15.3333V5.33334C18.9798 4.8029 18.7691 4.2942 18.394 3.91912C18.019 3.54405 17.5103 3.33334 16.9798 3.33334H15.6465V2C15.6465 1.82319 15.5762 1.65362 15.4512 1.5286C15.3262 1.40357 15.1566 1.33334 14.9798 1.33334C14.803 1.33334 14.6334 1.40357 14.5084 1.5286C14.3834 1.65362 14.3132 1.82319 14.3132 2V3.33334H6.31315V2C6.31315 1.82319 6.24291 1.65362 6.11789 1.5286C5.99286 1.40357 5.8233 1.33334 5.64648 1.33334ZM6.31315 4.66667H14.3132V5.33334C14.3132 5.51015 14.3834 5.67972 14.5084 5.80474C14.6334 5.92976 14.803 6 14.9798 6C15.1566 6 15.3262 5.92976 15.4512 5.80474C15.5762 5.67972 15.6465 5.51015 15.6465 5.33334V4.66667H16.9798C17.0674 4.66667 17.1541 4.68391 17.2349 4.71742C17.3158 4.75092 17.3893 4.80003 17.4512 4.86193C17.5131 4.92384 17.5622 4.99733 17.5957 5.07821C17.6292 5.1591 17.6465 5.24579 17.6465 5.33334V7.33334H2.97982V5.33334C2.97982 5.24579 2.99706 5.1591 3.03056 5.07821C3.06407 4.99733 3.11317 4.92384 3.17508 4.86193C3.23699 4.80003 3.31048 4.75092 3.39136 4.71742C3.47225 4.68391 3.55894 4.66667 3.64648 4.66667H4.97982V5.33334C4.97982 5.51015 5.05006 5.67972 5.17508 5.80474C5.3001 5.92976 5.46967 6 5.64648 6C5.8233 6 5.99286 5.92976 6.11789 5.80474C6.24291 5.67972 6.31315 5.51015 6.31315 5.33334V4.66667ZM17.6465 8.66667V15.3333C17.6465 15.8638 17.4358 16.3725 17.0607 16.7476C16.6856 17.1226 16.1769 17.3333 15.6465 17.3333H4.97982C4.44938 17.3333 3.94068 17.1226 3.5656 16.7476C3.19053 16.3725 2.97982 15.8638 2.97982 15.3333V8.66667H17.6465ZM14.1178 10.1953C14.2428 10.3204 14.313 10.4899 14.313 10.6667C14.313 10.8434 14.2428 11.013 14.1178 11.138L10.1178 15.138C9.9928 15.263 9.82326 15.3332 9.64648 15.3332C9.46971 15.3332 9.30017 15.263 9.17515 15.138L6.50848 12.4713C6.44481 12.4098 6.39402 12.3363 6.35908 12.2549C6.32414 12.1736 6.30575 12.0861 6.30498 11.9976C6.30421 11.9091 6.32108 11.8213 6.3546 11.7394C6.38812 11.6574 6.43763 11.583 6.50022 11.5204C6.56282 11.4578 6.63725 11.4083 6.71918 11.3748C6.80111 11.3413 6.8889 11.3244 6.97742 11.3252C7.06594 11.3259 7.15342 11.3443 7.23475 11.3793C7.31609 11.4142 7.38965 11.465 7.45115 11.5287L9.64648 13.724L13.1752 10.1953C13.3002 10.0704 13.4697 10.0001 13.6465 10.0001C13.8233 10.0001 13.9928 10.0704 14.1178 10.1953Z"
          fill={getColorStr(theme, colorKey)}
        />
      </G>
      <Defs>
        <ClipPath id="clip0_621_22948">
          <Rect
            width="20"
            height="20"
            fill="transparent"
            transform="translate(0.312988)"
          />
        </ClipPath>
      </Defs>
    </SvgCommon>
  );
});
